<template>
  <a-row style="padding: 10px;">
    <a-col span="24">
      <a-form layout="inline">
        <a-form-item label="用户账号">
          <a-input v-model="search.account" placeholder="请输入用户账号！"></a-input>
        </a-form-item>
        <a-form-item label="用户名称">
          <a-input v-model="search.nickname" placeholder="请输入用户名称！"></a-input>
        </a-form-item>
        <a-form-item label="用户电话">
          <a-input v-model="search.telephone" placeholder="请输入用户电话！"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="searchList">查询</a-button>
        </a-form-item>
      </a-form>
    </a-col>
    <a-col span="24">
      <a-table :dataSource="userList" :columns="columns" :pagination="pagination" :loading="loading" size="small"
               bordered
               :rowKey="record => record.adminId">
        <template slot="operation" slot-scope="text, record, index">
          <div>
            <span>
              <a @click="() => updateUser(record)">编辑</a>
              <a @click="() => resetPwd(record)">重置密码</a>
              <a @click="() => delUser(record)">删除</a>
            </span>
          </div>
        </template>
      </a-table>
      <NCPagination :page="pageObj" @changePage="(page)=>{this.pageObj = page}" @searchList="searchList"/>
    </a-col>
    <a-modal v-model="modal.visible" title="修改用户信息">
      <a-form :form="modal.form">
        <a-form-item label="用户账号" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入用户账号！"
                   v-decorator="['account', {rules: [{ required: true, message: '请输入用户账号！'}], initialValue: selectedData.account}]"/>
        </a-form-item>
        <a-form-item label="用户名称" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入用户名称！"
                   v-decorator="['nickname', {rules: [{ required: true, message: '请输入用户名称！'}], initialValue: selectedData.nickname}]"/>
        </a-form-item>
        <a-form-item label="用户电话" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入用户电话！"
                   v-decorator="['telephone', {rules: [{ required: true, message: '请输入用户电话！'}], initialValue: selectedData.telephone}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="modal.loading" @click="updateUserOk">
          确定
        </a-button>
        <a-button key="back" @click="modal.visible = false">取消</a-button>
      </template>
    </a-modal>
  </a-row>
</template>

<script>
  import NCPagination from '../../components/NCPagination'

  export default {
    name: 'User',
    components: {
      NCPagination
    },
    data () {
      return {
        pageObj: {total: 10, pageSize: 10, pageNum: 1},
        pagination: false,
        loading: false,
        userList: [],
        search: {
          account: null,
          nickname: null,
          telephone: null
        },
        columns: [
          {
            title: '序号',
            width: '20',
            customRender: (text, record, index) => {
              return index + this.pageObj.pageSize * (this.pageObj.pageNum - 1) + 1
            }
          }, {
            title: '用户账号',
            dataIndex: 'account'
          }, {
            title: '用户名称',
            dataIndex: 'nickname'
          }, {
            title: '用户电话',
            dataIndex: 'telephone'
          }, {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: true
          }, {
            title: '状态',
            dataIndex: 'state',
            sorter: true,
            customRender: (text, record, index) => {
              return text === 2 ? '锁定' : '正常'
            }
          }, {
            title: '操作',
            fixed: 'right',
            width: 200,
            scopedSlots: {customRender: 'operation'}
          }
        ],
        selectedData: {},
        modal: {
          labelCol: {span: 7},
          wrapperCol: {span: 12},
          loading: false,
          visible: false,
          form: this.$form.createForm(this)
        }
      }
    },
    mounted () {
      this.searchList()
    },
    methods: {
      searchList () {
        this.http.post('upmsApi', '/user/getUserList', {
          pageNum: this.pageObj.pageNum,
          pageSize: this.pageObj.pageSize,
          data: {
            account: this.search.account,
            nickname: this.search.nickname,
            telephone: this.search.telephone
          }
        }).then((res) => {
          if (res.success) {
            this.userList = res.rows
            this.pageObj.total = res.total
          }
        })
      },
      updateUser (record) {
        this.selectedData = record
        setTimeout(() => {
          this.model.form.setFieldsValue({
            account: record.account,
            nickname: record.nickname,
            telephone: record.telephone
          })
        }, 100)
        this.modal.visible = true
      },
      updateUserOk () {
        this.modal.form.validateFields((err, values) => {
          if (!err) {
            this.http.post('upmsApi', '/user/update', {
              userId: this.selectedData.userId,
              account: values.account,
              nickname: values.nickname,
              telephone: values.telephone
            }).then((res) => {
              if (res.success) {
                this.searchList()
                this.modal.visible = false
              }
            })
          }
        })
      },
      // 删除管理员
      delUser (record) {
        const that = this
        this.$confirm({
          title: '删除用户！?',
          onOk () {
            return new Promise((resolve, reject) => {
              console.log('删除')
              that.http.post('upmsApi', '/user/delete', {userId: record.userId}).then((res) => {
                if (res.success) {
                  that.$message.info(res.message)
                  that.searchList()
                  resolve(res.message)
                } else {
                  reject(res.message)
                }
              })
            })
          }
        })
      },
      // 重置密码
      resetPwd (record) {
        const that = this
        this.$confirm({
          title: '重置密码！?',
          onOk () {
            return new Promise((resolve, reject) => {
              that.http.post('upmsApi', '/user/resetPwd', {userId: record.userId}).then((res) => {
                if (res.success) {
                  that.$message.info(res.message)
                  that.searchList()
                  resolve(res.message)
                } else {
                  reject(res.message)
                }
              })
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
